
<template>
  <div class='cooperationProduct'>
    <div class='section'>
      <div class="headerSection">
        <split-vertical title="授权产品信息"></split-vertical>
        <v-form :formProps="searchForm" ref="form"
                v-on:handleReset="handleReset"
                v-on:coverFormData="coverFormData"></v-form>
      </div>
    </div>
    <div class="stand">
      <div style="line-height:50px;margin-left:10px;">
        <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
      </div>
      <div style="margin:0 10px;">
        <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount">
      </el-pagination>
    </div>
    <!-- 弹框-->
    <edit v-if="showEdit" @closeTip="closeTip" :cooperationData="cooperationData"></edit>
  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import axios from "axios"
  import edit from '../cooperation/edit'
  export default {
    inject: ["reload"],
    components: {
      VTable,SplitVertical,VForm,VButton,edit
    },
    data() {
      return {
        showEdit:false,
        searchCondition:{},
        show: false,
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        brandCode: "",
        productCode: "",
        sku:'',
        brandList: [],
        cooperationData:{},
        searchForm: {
          col: 3,
          labelWidth: '80px',
          submitBtn: {
            text: '搜索'
          },
          formItemArray: [{
            label: '商品货号',
            prop: 'productCode',
            placeholder: "请输入商品货号",
            value: ''
          }, {
            label: '品牌',
            prop: 'brandId',
            placeholder: "请选择",
            itemType: 'select',
            options: [],
            value: ''
          },{
            label: '商品sku',
            prop: 'sku',
            placeholder: "请输入商品sku",
            value: ''
          }]
        },
        operationBtnArray: [{
          text: '刷新',
          show: true,
          type: 'primary',
          icon:'el-icon-refresh',
          methodName: 'refresh',
        }, {
          text: '新增',
          show: true,
          icon:'el-icon-plus',
          type: 'success',
          methodName: 'add',
        },
          {
            text: '导出',
            icon:'el-icon-download',
            show: true,
            type: 'warning',
            methodName: 'exportExcel',
          }],
        tableParams:{
          dataArray:[],
          showMultiSelection:false,
          columnArray:[
            {label: '授权产品ID', prop: 'id',  sortable: false,width:'100'},
            {label: '供应商名称', prop: 'supplyName',  sortable: false,width:'150'},
            {label: '品牌', prop: 'brandName',  sortable: false,},
            {label: '商品货号', prop: 'productCode',sortable: false,},
            {label: '商品sku名称', prop: 'sku',sortable: false,width:'200'},
            {label: '种类', prop: 'typeName',sortable: false,},
            {label: '重量(kg)', prop: 'productWeight',sortable: false,},
            {label: '供应商产品编号', prop: 'supplyProductNo',sortable: false,width:'120'},
            {label: '进货价(含运含税)', prop: 'purchasePrice',sortable: false,width:'130'}
          ],
          rowHandle:{
            view:{
              show:false
            }
          },
        },
      };
    },
    created() {
      this.init();
    },
    mounted(){
      this.$root.Hub.$on('dialogwClose',data=>{
        this.show=data
      })
    },
    methods: {
      init() {
        this.productItemList();
        this.selectBrand();
      },
      handleSearchTopBtn(methodName) {
        if (methodName === "refresh") {
          this.refresh();
        } else if(methodName === "add") {
          this.create();
        }else{
          this.exportData()
        }
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      coverFormData(data) {
        this.searchCondition = data;
        this.query()
      },
      handleOperation(rowIndex, row, methodName) {
        this.id=row.id
        if(methodName == "update"){
          this.editCooperation()
        }else if(methodName == "delete"){
          this.del()
        }
      },
      editCooperation(){
        this.showEdit=true
        let parmas = {
          id:this.id
        };
        let success = data => {
          if (data.code == "OK") {
            this.cooperationData=data.data
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.productItemGetOne(parmas, success);
      },
      closeTip(){
        this.showEdit=false
      },
      exportData(){
        this.$confirm('此操作导出授权产品详情,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method:'get',
            url: '/api/erp/v1/product/item/download',
            responseType: 'blob',
            timeout:1000 * 60 * 10,
          }).then(res => {
            if(res.status == "200"){
              const link = document.createElement('a')
              let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '授权产品详情' + '.xlsx')
              // this.$loading.hide()
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              this.reload()
            }else{
              this.$message.error("数据错误")
            }
          }).catch(error => {
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
          })
        });
      },

      productItemList() {
        let parmas = {
          pageIndex: 1,
          pageSize: 10
        };
        let success = data => {
          if (data.code == "OK") {
            this.pageCount = data.pageCount;
            this.tableParams.dataArray = data.data;
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.productItemList(parmas, success);
      },
      selectBrand(){
        let success=data=>{
          if(data.code=='OK'){
            this.brandList=data.data
            this.searchForm.formItemArray.forEach(item => {
              if (item.prop === 'brandId') {
                item.options = this.buildExceptKeyAndValue(data.data, "bname", "id", "label", "value");
              }
            })
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.getBrandDetail({},success)
      },
      query() {
        let param = this.searchCondition;
        if (!param.pageIndex || !param.pageSize) {
          param['pageIndex'] = this.pageIndex;
          param['pageSize'] = this.pageSize;
        }
        let success = data => {
          if (data.code === 'OK') {
            this.pageCount = data.pageCount;
            this.tableParams.dataArray=data.data
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.productItemList(param, success);
      },
      //添加新授权产品按钮
      addproduct() {
        this.showTip = true;
      },
      //关闭弹窗
      closeDialog() {
        this.showTip = false;
        this.show = false;
      },
      reset() {
        this.productCode='',
          this.brandCode=''
      },
      refresh() {
        this.productItemList()
      },
      create() {
        this.$router.push({
          path:'/cooperation-add'
        })
      },
      //当前页
      handleCurrentChange(val) {
        this.searchCondition['pageIndex'] = val;
        this.query()
      },
      del() {
        this.$confirm("是否删除该消息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }).then(() => {
          let parmas = {
            id: this.id
          };
          let success = data => {
            if (data.code == "OK") {
              this.reload();
              this.$message.success("删除成功")
            }
          };
          this.api.productItemDelete(parmas, success);
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      }
    },

  };
</script>

<style lang="scss" scoped>
  .cooperationProduct {
    .headerSection{
      background:#fff;
      height:145px;
      padding:0 10px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
    .block{
      padding: 10px 0;
      text-align: right;
    }
  }
</style>
